<template>
  <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body :close-on-click-modal="false"
             v-dialogDrag>
    <div class="app-container">

      <el-table border v-loading="loading" :data="dataList" @selection-change="handleSelectionChange" ref="table"
                :max-height="tableMaxHeight">
        <el-table-column label="客户名称" align="center" prop="customerName" width="160">
          <template slot-scope="scope">
            {{scope.row.customerName}}
          </template>
        </el-table-column>
        <el-table-column label="项目名称" align="center" prop="projectId">
          <template slot-scope="scope">
            <dict-tag :options="PrjNameOptions" :value="scope.row.projectId"/>
          </template>
        </el-table-column>

        <el-table-column label="供应商名称" align="center" prop="supplierName"/>
        <el-table-column label="产品名称" align="center" prop="goodsName"/>
        <el-table-column label="产品品牌" align="center" prop="goodsBrand"/>
        <el-table-column label="产品型号" align="center" prop="model"/>
        <el-table-column label="单价" align="center" prop="goodsUnitPrice"/>
        <el-table-column label="销售数量" align="center" prop="goodsCount"/>
        <el-table-column label="总价" align="center" prop="goodsTotalPrice"/>
        <el-table-column label="销售人姓名" align="center" prop="saleName"/>
        <el-table-column label="销售日期" align="center" prop="saleDate">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.saleDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否提交开票" align="center" prop="invoice">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yes_no" :value="scope.row.invoice"/>
          </template>
        </el-table-column>
        <el-table-column label="是否回款" align="center" prop="fundCallback">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.fund_callback" :value="scope.row.fundCallback"/>
          </template>
        </el-table-column>
        <el-table-column label="销售类型" align="center" prop="type">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sale_type" :value="scope.row.type"/>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @pagination="getList"/>
    </div>
  </el-dialog>
</template>

<script>
    import {deleteAction, downloadFile, getAction, getById} from '@/api/manage'

    export default {
        name: "GoodsOrderinForm",
        dicts: ['fund_callback', 'sale_type', 'yes_no'],
        components: {},
        data() {
            return {
                title: "详细记录",
                open: false,
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 销售信息管理表格数据
                dataList: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 20,
                    goodsId: null,
                    goodsName: null,
                    goodsBrand: null,
                    goodsUnitPrice: null,
                    goodsCount: null,
                    goodsTotalPrice: null,
                    saleDate: null,
                    supplierId: null,
                    supplierName: null,
                    customerId: null,
                    customerName: null,
                    invoice: null,
                    invoiceId: null,
                    invoiceNo: null,
                    fundCallback: null,
                    receipt: null,
                    saleId: null,
                    saleName: null,
                    dateRange: "",
                    params: {},
                },
                url: {
                    listIds: '/goodsSale/goodsSale/listIds/',
                    list: '/goodsSale/goodsSale/list',
                    remove: '/goodsSale/goodsSale/',
                    export: '/goodsSale/goodsSale/export',
                    delete: '/goodsSale/goodsSale/deleteAndModidyOrderin/',
                    prjNames: '/projectBaseInfo/projectBaseInfo/prjNames',
                },
                PrjNameOptions: [],
                tableMaxHeight: window.innerHeight - 320,
            };
        },
        created() {
            this.intDictsForPrj();
            window.addEventListener('resize', this.getTableHeight);
        },
        destroyed() {
            window.removeEventListener('resize', this.getTableHeight)
        },
        methods: {
            handleSelectionChange(e) {

            },
            showSaleRecordForOrder(order) {
                let that = this;
                let orderId = order.id;
                that.queryParams.goodsId = orderId;
                that.getList();
                that.open = true;
            },
            getTableHeight() {
                this.tableHeight = window.innerHeight - 320
            },
            intDictsForPrj() {
                let that = this;
                getAction(that.url.prjNames, {}).then(res => {
                    that.PrjNameOptions = res.data.nameList;
                })
            },
            /** 查询销售信息管理列表 */
            getList() {
                this.loading = true;
                getAction(this.url.list, this.queryParams).then(response => {
                    this.dataList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
        }
    };
</script>
